<template>
  <div>
    <el-col :span="24">
      <Tabs value="name1">
        <TabPane label="基本信息" name="name1">
          <!--一行-->
          <el-row class="row" id="one">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>基本信息</h3>
                  </el-col>
                  <el-col :span="2">
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>名称</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="糖尿病患者用药调研">
                    </el-col>
                  </el-col>
                  <el-col :span="11" :offset="2">
                    <el-col :span="6">
                      <span>状态</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="已结束">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>最后修改日期</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="2016-09-23">
                    </el-col>
                  </el-col>
                  <el-col :span="11" :offset="2">
                    <el-col :span="6">
                      <span>调研有效日期</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="2016-09-01~2016-09-30">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>审批人员</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="仇伟佳">
                    </el-col>
                  </el-col>
                  <el-col :span="11" :offset="2">
                    <el-col :span="6">
                      <span>已填问卷量</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="0">
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" style="padding-top: 20px;padding-bottom: 50px">
                  <el-col :span="11">
                    <el-col :span="6">
                      <span>设计样本量</span>
                    </el-col>
                    <el-col :span="15">
                      <input type="text" class="search-input" value="1500">
                    </el-col>
                  </el-col>
                </el-col>

              </el-row>
            </div>
          </el-row>
          <!--五行-->
          <el-row class="row" id="one">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <h3>参与人员</h3>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" style="padding-top: 20px;padding-bottom: 70px">
                  <Doctor></Doctor>
                </el-col>
              </el-row>
            </div>
          </el-row>
        </TabPane>
        <TabPane label="调研结果" name="name2">
          <!--四行-->
          <el-row class="row" id="two">
            <el-col :span="5">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="22">
                      <p>邀请人数</p>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <Pie1></Pie1>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="5" :offset="1">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>参与人数</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <Pie2></Pie2>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="5" :offset="1">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>完成人数</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <Pie3></Pie3>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="5" :offset="1">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>有效样本</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <Pie4></Pie4>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
          <!--二行-->
          <el-row class="row" id="two">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="22">
                      <p>以下哪些药物具有协同作用？<span class="span red">二甲双胍</span>&nbsp;&nbsp;<span class="span green">阿卡波糖</span>&nbsp;&nbsp;<span class="span dark_green">磺脲类</span></p>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div :style="{width: '100%'}">
                      <Title1></Title1>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>开颅术后，需要给予丙戊酸钠和美罗培南分别预防癫痫和感染，您如何处理？<span class="span red">二甲双胍</span>&nbsp;&nbsp;<span class="span green">阿卡波糖</span>&nbsp;&nbsp;<span class="span dark_green">磺脲类</span></p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div :style="{width: '100%'}">
                      <Title2></Title2>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
          <!--三行-->
          <el-row class="row" id="two">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <el-col :span="22">
                      <p>治疗单纯性下尿路感染需要使用较小剂量的原因是？<span class="span red">二甲双胍</span>&nbsp;&nbsp;<span class="span green">阿卡波糖</span>&nbsp;&nbsp;<span class="span dark_green">磺脲类</span></p>
                    </el-col>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div :style="{width: '100%'}">
                      <Title3></Title3>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>在临床药物使用过程中，您是否会关注抗生素相互作用并考虑调整剂量？<span class="span red">二甲双胍</span>&nbsp;&nbsp;<span class="span green">阿卡波糖</span>&nbsp;&nbsp;<span class="span dark_green">磺脲类</span></p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <div :style="{width: '100%'}">
                      <Title4></Title4>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
        </TabPane>
      </Tabs>
    </el-col>
  </div>
</template>

<script>
  import Title1 from './title1'
  import Title2 from './title2'
  import Title3 from './title3'
  import Title4 from './title4'
  import Pie1 from './pie1'
  import Pie2 from './pie2'
  import Pie3 from './pie3'
  import Pie4 from './pie4'
  import Doctor from './doctor'
  export default {
    components: {
      Title1,Title2,Title3,Title4,Pie1,Pie2,Pie3,Pie4,Doctor
    },
  }
</script>

<style scoped>
  .row {
    padding-bottom: 30px;
  }
  .center {
    padding: 10px 30px;
    color: #fff;
    border-radius: 10px;
    background-image: url("../../../assets/blur-bg-blurred.jpg");
  }
  .h {
    border-bottom: 2px solid #fff;
    min-height: 50px;
    line-height: 24px;
    padding: 13px 0;
    box-sizing: border-box;
    font-size: 18px;
  }
  .search-input {
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
    width: 100%;
  }
  .span{
    display: inline-block;
    position: relative;
    color: #fff;
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
  }
  .span:after{
    content: " ";
    position: absolute;
    left: -7px;
    top: -7px;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    background: #fff;
    color: #fff;
  }
  .green{
    background-color: #7b9e02;
  }
  .span.green:after{
    content: "2";
    color: #7b9e02;
  }
  .yellow{
    background-color: #deb81b;
  }
  .dark_green{
    background-color: #1f9e91;
  }
  .span.dark_green:after{
    content: '3';
    color: #1f9e91;
  }
  .red{
    background-color: #e85656;
  }
  .span.red:after {
    content: '1';
    color: #e85656;
  }
</style>
<style>
  .ivu-tabs-nav{
    width: 100%;
  }
  .ivu-tabs-nav>div{
    width: 50%;
    text-align: center;
  }
  .ivu-tabs-tab{
    color: #fff;
    font-size: 20px;
  }
  .ivu-tabs-ink-bar{
    background-color: #e85656!important;
    height: 5px!important;
    position: absolute!important;
    left: 0!important;
    bottom: -5px!important;
  }
  .ivu-tabs-nav .ivu-tabs-tab-active{
    color: #fff!important;
    font-weight: bold!important;
  }
  .ivu-tabs-nav {
    border-bottom: 5px solid #fff!important;
  }
  .el-collapse-item__header{
    background-color: rgba(245, 245, 248, 0) !important;
    color: #fff!important;
  }
  .el-collapse-item__wrap{
    background-color: rgba(245, 245, 248, 0)!important;
    color: #fff!important;
  }
  .el-collapse-item__content{
    color: #fff!important;
  }
</style>
